import { MessageBoxService } from './../../components/messageBox';
import { StoreSvr } from './../../services/store';
import { FinishedOrders } from './../finishedOrders/index';
import { AppStore } from './../../services/appStore';
import { Order } from './../../models/order';
import { MessageHandleManager } from './../../utils/messageHandle/messageHandleManager';
import { OrderMessageHandle } from './../../utils/messageHandle/orderMessageHandle';
import { ActivatedRoute } from '@angular/router';
import { Observable, Subject, Subscription } from 'rxjs';
import { Component, Directive, ElementRef, ChangeDetectorRef, OnDestroy, OnInit, style } from '@angular/core';
import { OrderPanels } from './orderPanels';
import { PageBase } from "app/base";


@Component({

  // The selector is what angular internally uses
  // for `document.querySelectorAll(selector)` in our index.html
  // where, in this case, selector is the string 'home'
  selector: 'home',  // <home></home>
  // Our list of styles in our component. We may add more to compose many styles together
  styleUrls: ['./home.component.scss'],
  // Every Angular template is first compiled by the browser before Angular runs it's compiler
  template: `
    <div class="panels">
      <order-panels  [orders]='orders'></order-panels>
      <img [hidden]="!(orders&&orders.length==0)" src="./assets/img/kds-noorders.png" class="divtcvma" style="transform: translate(-50%, -50%) scale(0.75);top:45%;"/>
    </div>
  `,
  providers: []
})
export class HomeComponent extends PageBase implements OnInit, OnDestroy {
  private orderMessageHandle: OrderMessageHandle
  private orders: any;


  // TypeScript public modifiers
  constructor(private storeSvr: StoreSvr, private appStore: AppStore, private changeDetectorRef: ChangeDetectorRef) {
    super();
  }

  async ngOnInit() {
    const subscribetion = this.appStore.orderStore.observable.subscribe(orders => {
      this.orders = orders || [];
      this.changeDetectorRef.detectChanges();
    })
    this.subscribetions.push(subscribetion);
  }

}